<template>
    <div class="container">
        <div v-if="getFileUrlKey" id="divId" style="display: flex;align-items: center;justify-content: center;"></div>
    </div>
</template>

<script setup>
import { onMounted } from "vue";
import {useRouter} from "vue-router";
import {ElLoading} from "element-plus";
import {parseOfdDocument, renderOfd} from 'ofd.js'

const router = useRouter();
let getFileUrlKey = router.currentRoute.value.params.fileUrlKey;

const getWord = (fileUrlKey, callback) => {
    parseOfdDocument({
        // ofd写入文件地址
        ofd: fileUrlKey,
        success(res) {
            //输出ofd每页的div
            let screenWidth = 800;
            const divs = renderOfd(screenWidth, res[0]);
            let contentDiv = document.getElementById('divId');
            contentDiv.innerHTML = '';
            for (const div of divs) {
                contentDiv.appendChild(div);
            }
            if (callback) callback();
        },
        fail(error) {
            console.log(error)
        }
    });
}

onMounted(() => {
    if (getFileUrlKey !== '') {
        let fileUrlKey = getFileUrlKey.replaceAll("@", "/");
        const loading = ElLoading.service({
            lock: true,
            text: 'loading...',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
            getWord(fileUrlKey, () => {
                loading.close();
            });
        }, 1000);
    }
});
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
